@charset "utf-8";

@import '../../theme.scss';

.x-modal {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;

  &__mask {
    background: var(--x-mask-color);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.2s ease-out !important;
  }

  &__inner {
    width: 100%;
    background: #f9f9fa;
    box-shadow: 0 0 px(16) rgba(0, 39, 61, 0.05);
    position: relative;
    z-index: 2;
  }

  &.x-modal--init {
    opacity: 0;
  }

  &.x-modal--enter {
    .x-modal__mask {
      opacity: 1 !important;
    }
  }

  &.x-modal--leave {
    .x-modal__mask {
      opacity: 0 !important;
    }
  }
}
